<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"></meta>
	</head>
<body>
	<!--<img src="img/start.png" style="width: 10;height: 10;" />-->

<p>要使用的图像：</p>


<p>画布：</p>
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;background:#ffffff;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script src="js/jquery-1.11.3.min.js"></script>
<script>

	var canvas=document.getElementById("myCanvas")
	var cxt=canvas.getContext("2d")
	// var footprint_img=document.getElementById("footprint");
	// var footprint_img=new Image();
	// footprint_img.src="footprint.jpg";
	preImage("img/start.png",function(){
		cxt.drawImage(this,10,10,20,20);
	});


function preImage(url,callback){
	 var img = new Image(); //创建一个Image对象，实现图片的预下载
     img.src = url;
   
    if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
         callback.call(img);
        return; // 直接返回，不用再处理onload事件
     }

     img.onload = function () { //图片下载完毕时异步调用callback函数。
         callback.call(img);//将回调函数的this替换为Image对象
     };
}

</script>

</body>
</html>